<template>
    <div>
      <div v-for="(item, index) in styleList" :key="index">
        <h3>{{ item.label }}</h3>
        <div v-for="(configItem, configIndex) in item.config" :key="configIndex">
          <component :is="getComponentName(configItem.type)" :label="configItem.label" :value="configItem.value" :options="configItem.options" />
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue';
  import Checkbox from './Checkbox.vue';
  import Input from './Input.vue';
  import Select from './Select.vue';
  import Tabs from './Tabconfigs.vue';
  
  const props = defineProps({
    styleList: {
      type: Array,
      default: () => []
    }
  });
  
  const componentsMap = {
    checkbox: Checkbox,
    input: Input,
    select: Select,
    tabs: Tabs
  };
  
  const getComponentName = (type) => {
    return componentsMap[type];
  };
  </script>